<template>
	<view class="container">
		<view class="settings-list">
			<!-- 提醒设置 -->
			<view class="settings-section">
				<view class="section-title">提醒设置</view>
				<view class="settings-item">
					<text>开启提醒</text>
					<switch :checked="settings.enableNotification" @change="toggleNotification" />
				</view>
				<view class="settings-item" v-if="settings.enableNotification">
					<text>提醒方式</text>
					<picker 
						:range="notificationTypes" 
						:value="settings.notificationType"
						@change="onNotificationTypeChange"
					>
						<view class="picker-text">
							{{notificationTypes[settings.notificationType]}}
						</view>
					</picker>
				</view>
				<view class="settings-item" v-if="settings.enableNotification">
					<text>提前提醒时间</text>
					<picker 
						:range="reminderTimes" 
						:value="settings.reminderTime"
						@change="onReminderTimeChange"
					>
						<view class="picker-text">
							{{reminderTimes[settings.reminderTime]}}
						</view>
					</picker>
				</view>
			</view>

			<!-- 同步设置 -->
			<view class="settings-section">
				<view class="section-title">同步设置</view>
				<view class="settings-item">
					<text>自动同步</text>
					<switch :checked="settings.enableSync" @change="toggleSync" />
				</view>
				<view class="settings-item" v-if="settings.enableSync">
					<text>同步频率</text>
					<picker 
						:range="syncIntervals" 
						:value="settings.syncInterval"
						@change="onSyncIntervalChange"
					>
						<view class="picker-text">
							{{syncIntervals[settings.syncInterval]}}
						</view>
					</picker>
				</view>
			</view>

			<!-- 显示设置 -->
			<view class="settings-section">
				<view class="section-title">显示设置</view>
				<view class="settings-item">
					<text>默认视图</text>
					<picker 
						:range="viewTypes" 
						:value="settings.defaultView"
						@change="onDefaultViewChange"
					>
						<view class="picker-text">
							{{viewTypes[settings.defaultView]}}
						</view>
					</picker>
				</view>
				<view class="settings-item">
					<text>显示已完成任务</text>
					<switch :checked="settings.showCompleted" @change="toggleShowCompleted" />
				</view>
			</view>

			<!-- 数据管理 -->
			<view class="settings-section">
				<view class="section-title">数据管理</view>
				<view class="settings-item">
					<text>清除所有数据</text>
					<button class="danger-btn" @tap="clearAllData">清除</button>
				</view>
				<view class="settings-item">
					<text>导出数据</text>
					<button class="primary-btn" @tap="exportData">导出</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			settings: {
				enableNotification: true,
				notificationType: 0,
				reminderTime: 0,
				enableSync: false,
				syncInterval: 0,
				defaultView: 0,
				showCompleted: true
			},
			notificationTypes: ['弹窗提醒', '声音提醒', '震动提醒'],
			reminderTimes: ['5分钟前', '15分钟前', '30分钟前', '1小时前', '1天前'],
			syncIntervals: ['实时同步', '每小时', '每天'],
			viewTypes: ['日视图', '周视图', '月视图']
		}
	},
	onLoad() {
		this.loadSettings()
	},
	methods: {
		loadSettings() {
			const settings = uni.getStorageSync('settings')
			if (settings) {
				this.settings = JSON.parse(settings)
			}
		},
		saveSettings() {
			uni.setStorageSync('settings', JSON.stringify(this.settings))
		},
		toggleNotification(e) {
			this.settings.enableNotification = e.detail.value
			this.saveSettings()
		},
		toggleSync(e) {
			this.settings.enableSync = e.detail.value
			this.saveSettings()
		},
		toggleShowCompleted(e) {
			this.settings.showCompleted = e.detail.value
			this.saveSettings()
		},
		onNotificationTypeChange(e) {
			this.settings.notificationType = parseInt(e.detail.value)
			this.saveSettings()
		},
		onReminderTimeChange(e) {
			this.settings.reminderTime = parseInt(e.detail.value)
			this.saveSettings()
		},
		onSyncIntervalChange(e) {
			this.settings.syncInterval = parseInt(e.detail.value)
			this.saveSettings()
		},
		onDefaultViewChange(e) {
			this.settings.defaultView = parseInt(e.detail.value)
			this.saveSettings()
		},
		clearAllData() {
			uni.showModal({
				title: '确认清除',
				content: '此操作将清除所有数据，且无法恢复，是否继续？',
				success: (res) => {
					if (res.confirm) {
						uni.clearStorageSync()
						uni.showToast({
							title: '数据已清除',
							icon: 'success'
						})
						// 重新初始化设置
						this.settings = {
							enableNotification: true,
							notificationType: 0,
							reminderTime: 0,
							enableSync: false,
							syncInterval: 0,
							defaultView: 0,
							showCompleted: true
						}
						this.saveSettings()
					}
				}
			})
		},
		exportData() {
			// 导出所有数据
			const data = {
				settings: this.settings,
				tasks: uni.getStorageSync('tasks'),
				events: uni.getStorageSync('events')
			}
			
			// 在实际应用中，这里可以实现导出为文件或分享功能
			uni.showToast({
				title: '导出功能开发中',
				icon: 'none'
			})
		}
	}
}
</script>

<style>
.container {
	flex: 1;
	padding: 20rpx;
	background-color: #f5f5f5;
}

.settings-list {
	background-color: #fff;
	border-radius: 20rpx;
}

.settings-section {
	padding: 20rpx;
	border-bottom: 1px solid #eee;
}

.settings-section:last-child {
	border-bottom: none;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
	color: #333;
}

.settings-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 0;
	font-size: 28rpx;
}

.settings-item text {
	color: #666;
}

.picker-text {
	color: #333;
}

.danger-btn {
	background-color: #ff4d4f;
	color: #fff;
	font-size: 24rpx;
	padding: 10rpx 30rpx;
	border-radius: 30rpx;
}

.primary-btn {
	background-color: #007AFF;
	color: #fff;
	font-size: 24rpx;
	padding: 10rpx 30rpx;
	border-radius: 30rpx;
}

switch {
	transform: scale(0.8);
}
</style> 